<template>
  <div class="guesslike">
    <div class="guesslikeTop">
      <span>猜你喜欢</span>
      <a href="javascript:;">换一换<i class="el-icon-refresh"></i></a>
    </div>
    <div class="guesslikeMain">
      <a href="" v-for="(g, index) in GuessLike" :key="index">
        <img :src="g.goodsImg" alt="" />
        <span>{{ g.goodTitle }}</span>
        <h1>￥{{ g.goodPrice }}</h1>
      </a>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  mounted () {
    this.$store.dispatch('homeAbout/guessLike')
  },
  computed: {
    ...mapState('homeAbout', ['GuessLike'])
  }
}
</script>

<style scoped lang="less">
.guesslike {
  .guesslikeTop {
    span {
      font-size: 30px;
      font-weight: bold;
    }
    a{
      position: relative;
      bottom: -22px;
      float: right;
      font-size: 13px;
      color: #606266;
      &:hover{
        color: #df3033;
      }
      i{
        font-size: 17px;
        color: #df3033;
      }
    }
  }
  .guesslikeMain {
    border: 1px solid #ccc;
    height: 260px;
    margin-top: 5px;
    display: flex;
    a {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #606266;
      overflow: hidden;
      background-color: #fff;
      box-sizing: border-box;
      font-size: 13px;
      img {
        width: 80%;
        transition: 0.3s;
        &:hover {
          transform: scale(1.1);
        }
      }
      span {
        padding: 10px 5px;
        border-right: 1px solid #ccc;
      }
      h1 {
        margin: 0;
        color: #df3033;
        border-right: 1px solid #ccc;
      }
    }
  }
}
</style>
